{ "componentChunkName": "component---node-modules-gatsby-theme-primer-wiki-src-templates-post-query-js", "path": "/posts/frontend/일본어 폰트-타이포그래피 가이드/", "result": {"data":{"mdx":{"id":"a03c1381-7681-56f1-b8d2-0f015a1fc25a","tableOfContents":{"items":[{"url":"#와-ー는-각각-별도의-유니코드-문자","title":"、와 ー는 각각 별도의 유니코드 문자"},{"url":"#langja","title":"lang=\"ja\""},{"url":"#font-family에-적었다고-그-폰트가-그렸다는-뜻은-아님","title":"font-family에 적었다고 그 폰트가 그렸다는 뜻은 아님"},{"url":"#word-break-keep-all을-일본어에-그대로-쓰면-안-됨","title":"word-break: keep-all을 일본어에 그대로 쓰면 안 됨"},{"url":"#font-feature-settings-palt","title":"font-feature-settings: \"palt\""},{"url":"#text-autospace--text-spacing-trim","title":"text-autospace / text-spacing-trim"},{"url":"#intlsegmenter","title":"Intl.Segmenter"},{"url":"#일본어-공백이-이상하다-cs가-오면-이-순서로-봄","title":"\"일본어 공백이 이상하다\" CS가 오면 이 순서로 봄"},{"url":"#참고","title":"참고"}]},"fields":{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","slug":"/posts/frontend/일본어 폰트-타이포그래피 가이드/","url":"https://r0k.wiki/posts/frontend/일본어 폰트-타이포그래피 가이드/","editUrl":"https://github.com/padawanR0k/wiki/blob/master/content/posts/frontend/일본어 폰트-타이포그래피 가이드.md","lastUpdatedAt":"2026-09-06T06:00:56.000Z","lastUpdated":"9/6/2026","gitCreatedAt":"2026-09-06T06:00:56.000Z","shouldShowTitle":true},"frontmatter":{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","description":null,"imageAlt":null,"tags":["i18n","css","javascript"],"date":"2026-09-06T00:00:00.000Z","dateModified":null,"language":null,"seoTitle":null,"image":null},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들\",\n \"date\": \"2026-09-06T00:00:00.000Z\",\n \"updated\": \"2026-09-06T00:00:00.000Z\",\n \"tags\": [\"i18n\", \"css\", \"javascript\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC778 \\uC2E0\\uADDC \\uC785\\uC0AC\\uC790\\uAC00 \\uC77C\\uBCF8\\uC5B4 \\uD398\\uC774\\uC9C0 \\uBCF4\\uACE0 \\uD53C\\uB4DC\\uBC31 \\uC90C\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\\"\\uC27C\\uD45C\\uB098 \\uC7A5\\uC74C\\uBD80\\uD638 \\uC55E\\uB4A4 \\uACF5\\uBC31\\uC774 \\uC774\\uC0C1\\uD558\\uB2E4\\\"\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u4F01\\u753B\\u3001\\u5236\\u4F5C\"), \" \\uC5D0\\uC11C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \" \\uC624\\uB978\\uCABD\\uC774 \\uBE44\\uC5B4 \\uBCF4\\uC5EC\\uC11C \\uC2A4\\uD398\\uC774\\uC2A4 \\uBB38\\uC790 \\uB080 \\uC904 \\uC54C\\uC558\\uC74C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"DOM \\uAE4C\\uBCF4\\uB2C8 \\uC2A4\\uD398\\uC774\\uC2A4 \\uC5C6\\uC74C\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD55C\\uAE00 \\uC11C\\uBE44\\uC2A4\\uB9CC \\uB9CC\\uB4E4 \\uB550 \\uB9C8\\uC8FC\\uCE60 \\uC77C \\uC5C6\\uB358 \\uBB38\\uC81C\\uB77C \\uC815\\uB9AC\\uD574\\uB460\")), mdx(\"h2\", {\n \"id\": \"와-ー는-각각-별도의-유니코드-문자\"\n }, \"\\u3001\\uC640 \\u30FC\\uB294 \\uAC01\\uAC01 \\uBCC4\\uB3C4\\uC758 \\uC720\\uB2C8\\uCF54\\uB4DC \\uBB38\\uC790\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \" = U+3001 IDEOGRAPHIC COMMA\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u30FC\"), \" = U+30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB458 \\uB2E4 ASCII \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \",\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"-\"), \"\\uC640 \\uB2E4\\uB978 \\uBB38\\uC790\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD3F0\\uD2B8 \\uC548\\uC5D0\\uC11C \\uBCC4\\uB3C4 glyph\\xB7metrics \\uAC00\\uC9D0\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC804\\uAC01 \\uBB38\\uC7A5\\uBD80\\uD638\\uB294 glyph \\uC790\\uCCB4\\uC5D0 \\uB0B4\\uBD80 \\uC5EC\\uBC31(side bearing/advance) \\uC788\\uC74C\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB208\\uC73C\\uB85C \\uBD24\\uC744 \\uB54C \\uACF5\\uBC31\\uCC98\\uB7FC \\uBCF4\\uC5EC\\uB3C4 \\uC2E4\\uC81C \\uC2A4\\uD398\\uC774\\uC2A4 \\uBB38\\uC790 \\uC788\\uB294 \\uAC74 \\uC544\\uB2D8\")))), mdx(\"p\", null, \"\\uD55C\\uAD6D\\uC5B4 \\uC11C\\uBE44\\uC2A4 \\uC2B5\\uAD00\\uC744 \\uC77C\\uBCF8\\uC5B4\\uC5D0 \\uADF8\\uB300\\uB85C \\uAC00\\uC838\\uAC00\\uBA74 \\uC5B4\\uAE0B\\uB098\\uB294 \\uC9C0\\uC810:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB2E8\\uC5B4 \\uC0AC\\uC774\\uC5D0 \\uACF5\\uBC31\\uC774 \\uC788\\uB2E4\\uB294 \\uC804\\uC81C\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u2192 \\uC77C\\uBCF8\\uC5B4\\uB294 \\uC77C\\uBC18 \\uBB38\\uC7A5\\uC5D0 \\uB744\\uC5B4\\uC4F0\\uAE30\\uAC00 \\uAC70\\uC758 \\uC5C6\\uC74C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u2192 \\uC904\\uBC14\\uAFC8 \\uAE30\\uD68C\\uAC00 \\uBB38\\uC790 \\uC0AC\\uC774\\uC5D0 \\uC874\\uC7AC\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"word-break: keep-all\"), \"\\uC744 \\uC790\\uC8FC \\uC500\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u2192 \\uC77C\\uBCF8\\uC5B4 \\uBCF8\\uBB38\\uC5D0 \\uC801\\uC6A9\\uD558\\uBA74 \\uC815\\uC0C1\\uC801\\uC778 CJK \\uC904\\uBC14\\uAFC8\\uC744 \\uB9C9\\uC544\\uC11C overflow \\uC0DD\\uAE40\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC27C\\uD45C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \",\"), \" \\uAE30\\uC900\\uC73C\\uB85C \\uC0DD\\uAC01\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u2192 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \"\\uB294 \\uC804\\uAC01 \\uBB38\\uC7A5\\uBD80\\uD638\\uB77C \\uAE00\\uB9AC\\uD504 \\uD3ED\\xB7\\uC5EC\\uBC31 \\uBAA8\\uB378\\uC774 \\uB2E4\\uB984\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD558\\uC774\\uD508/\\uB300\\uC2DC\\uC640 \\uBE44\\uC2B7\\uD55C \\uC120\\uC73C\\uB85C \\uC778\\uC2DD\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u2192 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u30FC\"), \"\\uB294 \\uAC00\\uD0C0\\uCE74\\uB098\\xB7\\uD788\\uB77C\\uAC00\\uB098 \\uC7A5\\uC74C\\uBD80\\uD638\\uB85C \\uC644\\uC804\\uD788 \\uB2E4\\uB978 \\uBB38\\uC790\")))), mdx(\"p\", null, \"\\uC6A9\\uC5B4 \\uC815\\uB9AC (\\uD55C\\uAD6D\\uC5B4 \\uC774\\uB984\\uC73C\\uB85C \\uAE30\\uC5B5\\uD558\\uACE0, \\uAD04\\uD638 \\uC548 \\uD55C\\uC790\\xB7\\uBC1C\\uC74C\\uC740 \\uAC80\\uC0C9 \\uD0A4\\uC6CC\\uB4DC\\uB85C):\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uBB38\\uC7A5\\uBD80\\uD638\\xB7\\uAE30\\uD638\\uB958 (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u7D04\\u7269\"), \", \\u3084\\u304F\\u3082\\u306E, yakumono)\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://ko.wikipedia.org/wiki/%EC%A1%B0%ED%8C%90\"\n }, \"\\uC870\\uD310\"), \"\\uC5D0\\uC11C \\uBCC4\\uB3C4 \\uAC04\\uACA9 \\uADDC\\uCE59\\uC774 \\uBD99\\uB294 \\uBB38\\uC7A5\\uBD80\\uD638\\xB7\\uAE30\\uD638\\uB958\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC870\\uD310 \\uADDC\\uCE59 (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u6587\\u5B57\\u7D44\\u307F\"), \", \\u3082\\u3058\\u3050\\u307F)\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uAE00\\uC790 \\uBC30\\uCE58\\xB7\\uAC04\\uACA9\\xB7\\uC904\\uBC14\\uAFC8\\uC744 \\uC544\\uC6B0\\uB974\\uB294 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://ko.wikipedia.org/wiki/%EC%A1%B0%ED%8C%90\"\n }, \"\\uC870\\uD310\"), \" \\uADDC\\uCE59 \\uC804\\uBC18\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uAE08\\uCE59 \\uCC98\\uB9AC (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u7981\\u5247\\u51E6\\u7406\"), \", \\u304D\\u3093\\u305D\\u304F\\u3057\\u3087\\u308A, kinsoku shori)\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uBB38\\uC7A5\\uBD80\\uD638\\uAC00 \\uC904 \\uB9E8 \\uC55E/\\uB4A4\\uC5D0 \\uBD80\\uC790\\uC5F0\\uC2A4\\uB7FD\\uAC8C \\uC624\\uB294 \\uAC78 \\uB9C9\\uB294 \\uADDC\\uCE59\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://ko.wikipedia.org/wiki/%EC%A0%84%EA%B0%81%EA%B3%BC_%EB%B0%98%EA%B0%81\"\n }, \"\\uC804\\uAC01/\\uBC18\\uAC01\"), \" (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u5168\\u89D2/\\u534A\\u89D2\"), \")\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\uFF21\"), \"\\uC640 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"A\"), \"\\uCC98\\uB7FC \\uD3ED\\uC774 \\uB2E4\\uB978 \\uBB38\\uC790 \\uD615\\uD0DC\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uAC80\\uC0C9\\xB7\\uC815\\uADDC\\uD654\\xB7UI \\uD3ED \\uACC4\\uC0B0\\uC5D0 \\uC601\\uD5A5\")))), mdx(\"h2\", {\n \"id\": \"langja\"\n }, \"lang=\\\"ja\\\"\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD398\\uC774\\uC9C0\\uAC00 \\uC77C\\uBCF8\\uC5B4\\uBA74 \\uBB38\\uC11C \\uB8E8\\uD2B8\\uC5D0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"lang=\\\"ja\\\"\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBD80 \\uC601\\uC5ED\\uB9CC \\uC77C\\uBCF8\\uC5B4\\uBA74 \\uD574\\uB2F9 \\uC601\\uC5ED\\uC5D0 \\uC9C0\\uC815\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC811\\uADFC\\uC131\\xB7\\uC74C\\uC131\\uD569\\uC131\\uBFD0 \\uC544\\uB2C8\\uB77C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \":lang(ja)\"), \" \\uC140\\uB809\\uD130\\uB85C \\uC77C\\uBCF8\\uC5B4 \\uC804\\uC6A9 \\uC2A4\\uD0C0\\uC77C \\uC2A4\\uCF54\\uD504\\uD558\\uB294 \\uAE30\\uC900\\uC774 \\uB428\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n ...\\n\\n\\n\\n

\\n \\uD55C\\uAD6D\\uC5B4 \\uC124\\uBA85\\n \\u30B7\\u30E7\\u30FC\\u30C8\\u52D5\\u753B\\u5E83\\u544A\\u306E\\u4F01\\u753B\\u3001\\u5236\\u4F5C\\n

\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://ko.wikipedia.org/wiki/%ED%9B%84%EB%A6%AC%EA%B0%80%EB%82%98\"\n }, \"\\uD6C4\\uB9AC\\uAC00\\uB098\"), \" \\uD544\\uC694\\uD558\\uBA74 \\uC774\\uBBF8\\uC9C0\\uB098 JS\\uB85C \\uB9CC\\uB4E4\\uC9C0 \\uB9D0\\uACE0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" \\uD0DC\\uADF8 \\uC0AC\\uC6A9\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n \\u65E5\\u672C\\u8A9E\\u306B\\u307B\\u3093\\u3054\\n\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"locale\\uC774 \\uC77C\\uBCF8\\uC5B4\\uC778\\uB370 \\uB8E8\\uD2B8 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"lang\"), \"\\uC774 \\uACC4\\uC18D \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ko\"), \"\\uB85C \\uB0A8\\uC544\\uC788\\uB294 \\uACBD\\uC6B0 \\uC2E4\\uBB34\\uC5D0\\uC11C \\uC740\\uADFC\\uD788 \\uC788\\uC74C\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC774\\uAC83\\uBD80\\uD130 \\uBA3C\\uC800 \\uACE0\\uCE60 \\uAC83\")))), mdx(\"h2\", {\n \"id\": \"font-family에-적었다고-그-폰트가-그렸다는-뜻은-아님\"\n }, \"font-family\\uC5D0 \\uC801\\uC5C8\\uB2E4\\uACE0 \\uADF8 \\uD3F0\\uD2B8\\uAC00 \\uADF8\\uB838\\uB2E4\\uB294 \\uB73B\\uC740 \\uC544\\uB2D8\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \":lang(ja) {\\n font-family:\\n \\\"Hiragino Sans\\\",\\n \\\"Yu Gothic\\\",\\n \\\"YuGothic\\\",\\n \\\"Meiryo\\\",\\n \\\"Noto Sans JP\\\",\\n sans-serif;\\n}\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uAC00\\uC7A5 \\uC911\\uC694\\uD55C \\uD655\\uC778 \\uD3EC\\uC778\\uD2B8\\uB294 glyph fallback\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC9C0\\uC815\\uD55C \\uD3F0\\uD2B8\\uAC00 \\uC77C\\uBCF8\\uC5B4 \\uAE00\\uB9AC\\uD504\\uB97C \\uD3EC\\uD568 \\uC548 \\uD558\\uAC70\\uB098 \\uC6F9\\uD3F0\\uD2B8 subset\\uC5D0\\uC11C \\uBE60\\uC9C0\\uBA74, \\uBE0C\\uB77C\\uC6B0\\uC800\\uAC00 \\uADF8 \\uBB38\\uC790\\uB9CC \\uB2E4\\uB978 \\uD3F0\\uD2B8\\uB85C \\uB300\\uCCB4\\uD568\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u30FC\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \", \\uAD04\\uD638 \\uAC19\\uC740 \\uAE30\\uD638\\uB9CC \\uB2E4\\uB978 metrics \\uAC00\\uC9C4 \\uD3F0\\uD2B8\\uB85C \\uB5A8\\uC5B4\\uC9C0\\uBA74 \\uADF8 \\uBD80\\uBD84\\uB9CC \\uC774\\uC9C8\\uAC10 \\uC0DD\\uAE40\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Chrome DevTools \\u2192 Elements \\u2192 Computed \\u2192 Rendered Fonts \\uC5D0\\uC11C \\uBB38\\uC81C\\uB418\\uB294 \\uB178\\uB4DC \\uC9C1\\uC811 \\uD655\\uC778\\uD558\\uB294 \\uAC8C \\uC81C\\uC77C \\uBE60\\uB984\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC6F9\\uD3F0\\uD2B8 subset \\uB9CC\\uB4E4 \\uB54C \\uD754\\uD55C \\uC2E4\\uC218\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uAC00\\uB098\\xB7\\uD55C\\uC790\\uB9CC \\uB0A8\\uAE30\\uACE0 \\uBB38\\uC7A5\\uBD80\\uD638\\uB97C \\uBE60\\uB728\\uB9BC\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u2192 punctuation\\uB9CC system fallback\\uC73C\\uB85C \\uD280\\uC5B4\\uC11C \\uD3F0\\uD2B8 \\uC548 \\uB9DE\\uC544 \\uBCF4\\uC784\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD3F0\\uD2B8 \\uB85C\\uB529 \\uD0C0\\uC774\\uBC0D\\uB3C4 \\uC904\\uBC14\\uAFC8\\uC5D0 \\uC601\\uD5A5\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4\\uB294 \\uBB38\\uC790 \\uB2E8\\uC704 \\uC904\\uBC14\\uAFC8\\uC774 \\uB9CE\\uC544\\uC11C fallback font\\uC640 \\uCD5C\\uC885 font\\uC758 advance width \\uCC28\\uC774\\uAC00 \\uD55C \\uC904\\uC758 \\uB9C8\\uC9C0\\uB9C9 \\uBB38\\uC790 \\uC704\\uCE58\\uB97C \\uBC14\\uAFC0 \\uC218 \\uC788\\uC74C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"font-display: swap\"), \" \\uC4F4\\uB2E4\\uBA74 CLS\\uBFD0 \\uC544\\uB2C8\\uB77C \\\"\\uCCAB \\uB80C\\uB354\\uC640 \\uB85C\\uB529 \\uD6C4 \\uC904\\uBC14\\uAFC8\\uC774 \\uB2EC\\uB77C\\uC9C0\\uB294\\uAC00\\\"\\uB3C4 \\uBCFC \\uAC83\")))), mdx(\"h2\", {\n \"id\": \"word-break-keep-all을-일본어에-그대로-쓰면-안-됨\"\n }, \"word-break: keep-all\\uC744 \\uC77C\\uBCF8\\uC5B4\\uC5D0 \\uADF8\\uB300\\uB85C \\uC4F0\\uBA74 \\uC548 \\uB428\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4\\uB294 \\uACF5\\uBC31 \\uC5C6\\uC774 \\uBB38\\uC7A5\\uC774 \\uC774\\uC5B4\\uC838\\uC11C \\uBE0C\\uB77C\\uC6B0\\uC800\\uAC00 \\uBB38\\uC790 \\uC0AC\\uC774\\uC758 \\uC904\\uBC14\\uAFC8 \\uAE30\\uD68C\\uB97C \\uD310\\uB2E8\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC5EC\\uAE30\\uC5D0 \\uAE08\\uCE59\\uCC98\\uB9AC \\uADDC\\uCE59\\uAE4C\\uC9C0 \\uACB9\\uCE68\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\\u3002)]\\u300D\\u300F\"), \" \\uAC19\\uC740 \\uB2EB\\uB294 \\uBB38\\uC7A5\\uBD80\\uD638\\uAC00 \\uC904 \\uB9E8 \\uC55E\\uC5D0 \\uC624\\uB294 \\uAC83 \\uD53C\\uD568\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"([\\u300C\\u300E\"), \" \\uAC19\\uC740 \\uC5EC\\uB294 \\uBB38\\uC7A5\\uBD80\\uD638\\uAC00 \\uC904 \\uB9E8 \\uB05D\\uC5D0 \\uC624\\uB294 \\uAC83 \\uD53C\\uD568\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \":lang(ja) {\\n line-break: strict;\\n word-break: normal;\\n overflow-wrap: break-word; /* \\uAE34 URL/\\uC2DD\\uBCC4\\uC790 \\uAC19\\uC740 \\uC608\\uC678 \\uB300\\uC751 */\\n}\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\uD55C\\uAD6D\\uC5B4 CSS \\uBCF5\\uC0AC\\uD558\\uBA74\\uC11C \\uAC00\\uC7A5 \\uC790\\uC8FC \\uD558\\uB294 \\uC2E4\\uC218 \\u2014 \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"word-break: keep-all\"), \"\\uC744 \\uC77C\\uBCF8\\uC5B4\\uC5D0\\uB3C4 \\uAC19\\uC774 \\uC801\\uC6A9\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4\\uC758 \\uC815\\uC0C1\\uC801\\uC778 CJK \\uC904\\uBC14\\uAFC8 \\uAE30\\uD68C\\uB97C \\uC9C0\\uB098\\uCE58\\uAC8C \\uC5C6\\uC560\\uBC84\\uB824\\uC11C \\uCEE8\\uD14C\\uC774\\uB108 \\uD3ED \\uB118\\uC5B4\\uAC00\\uB294 \\uBB38\\uC81C \\uC0DD\\uAE40\")))), mdx(\"p\", null, \"\\uAC19\\uC740 \\uBB38\\uC7A5\\uC744 \\uD3ED 260px \\uBC15\\uC2A4\\uC5D0 \\uB123\\uACE0 \\uBE44\\uAD50\\uD558\\uBA74 \\uCC28\\uC774\\uAC00 \\uBC14\\uB85C \\uBCF4\\uC784.\"), mdx(\"div\", {\n style: {\n \"display\": \"flex\",\n \"gap\": \"12px\",\n \"flexWrap\": \"wrap\",\n \"margin\": \"16px 0\"\n }\n }, mdx(\"div\", {\n style: {\n \"flex\": \"1\",\n \"minWidth\": \"200px\"\n }\n }, mdx(\"div\", {\n style: {\n \"fontSize\": \"12px\",\n \"color\": \"#667085\",\n \"marginBottom\": \"6px\"\n }\n }, \"word-break: normal\"), mdx(\"div\", {\n style: {\n \"width\": \"260px\",\n \"border\": \"1px dashed #999\",\n \"padding\": \"10px\",\n \"fontSize\": \"16px\",\n \"lineHeight\": \"1.7\",\n \"wordBreak\": \"normal\"\n },\n lang: \"ja\"\n }, \"\\u30B7\\u30E7\\u30FC\\u30C8\\u52D5\\u753B\\u5E83\\u544A\\u306E\\u4F01\\u753B\\u3001\\u5236\\u4F5C\\u3068\\u3044\\u3046\\u8B1B\\u5EA7\\u3067\\u306F\\u3001\\u4F01\\u753B\\u304B\\u3089\\u7DE8\\u96C6\\u307E\\u3067\\u4E00\\u9023\\u306E\\u6D41\\u308C\\u3092\\u5B66\\u3073\\u307E\\u3059\\u3002\")), mdx(\"div\", {\n style: {\n \"flex\": \"1\",\n \"minWidth\": \"200px\"\n }\n }, mdx(\"div\", {\n style: {\n \"fontSize\": \"12px\",\n \"color\": \"#667085\",\n \"marginBottom\": \"6px\"\n }\n }, \"word-break: keep-all\"), mdx(\"div\", {\n style: {\n \"width\": \"260px\",\n \"border\": \"1px dashed #b42318\",\n \"padding\": \"10px\",\n \"fontSize\": \"16px\",\n \"lineHeight\": \"1.7\",\n \"wordBreak\": \"keep-all\"\n },\n lang: \"ja\"\n }, \"\\u30B7\\u30E7\\u30FC\\u30C8\\u52D5\\u753B\\u5E83\\u544A\\u306E\\u4F01\\u753B\\u3001\\u5236\\u4F5C\\u3068\\u3044\\u3046\\u8B1B\\u5EA7\\u3067\\u306F\\u3001\\u4F01\\u753B\\u304B\\u3089\\u7DE8\\u96C6\\u307E\\u3067\\u4E00\\u9023\\u306E\\u6D41\\u308C\\u3092\\u5B66\\u3073\\u307E\\u3059\\u3002\"))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"keep-all\"), \" \\uCABD\\uC740 \\uBB38\\uC790 \\uC0AC\\uC774\\uC758 \\uC815\\uC0C1\\uC801\\uC778 \\uC904\\uBC14\\uAFC8 \\uAE30\\uD68C\\uAC00 \\uB9C9\\uD600\\uC11C \\uBC15\\uC2A4 \\uD3ED\\uC744 \\uB118\\uC5B4\\uAC00\\uAC70\\uB098 \\uD55C \\uB2E8\\uC5B4\\uCC98\\uB7FC \\uCDE8\\uAE09\\uB41C \\uAD6C\\uAC04\\uC774 \\uC090\\uC838\\uB098\\uC634\")), mdx(\"h2\", {\n \"id\": \"font-feature-settings-palt\"\n }, \"font-feature-settings: \\\"palt\\\"\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"OpenType feature\\uB294 \\uD3F0\\uD2B8\\uAC00 \\uC81C\\uACF5\\uD558\\uB294 \\uB300\\uCCB4 glyph\\xB7metrics\\uB97C \\uC120\\uD0DD\\uD558\\uB294 \\uAE30\\uB2A5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4\\uC5D0\\uC11C \\uC790\\uC8FC \\uB9C8\\uC8FC\\uCE58\\uB294 \\uD0DC\\uADF8\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"palt\"), \" (\\uBE44\\uB840\\uD3ED)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"pwid\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"vert\"), \" (\\uC138\\uB85C\\uC4F0\\uAE30\\uC6A9)\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"/* low-level: \\uD3F0\\uD2B8\\uAC00 palt\\uB97C \\uC81C\\uACF5\\uD560 \\uB54C\\uB9CC \\uD6A8\\uACFC\\uAC00 \\uC788\\uC74C */\\n.jp-heading {\\n font-feature-settings: \\\"palt\\\" 1;\\n}\\n\\n/* \\uAC00\\uB2A5\\uD558\\uBA74 \\uC758\\uBBF8\\uAC00 \\uB354 \\uBD84\\uBA85\\uD55C \\uC0C1\\uC704 \\uC18D\\uC131\\uC744 \\uC6B0\\uC120 \\uAC80\\uD1A0 */\\n.jp-ui {\\n font-variant-east-asian: proportional-width;\\n}\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"palt\"), \"\\uB97C \\\"\\uC77C\\uBCF8\\uC5B4\\uBA74 \\uBB34\\uC870\\uAC74 \\uCF1C\\uC57C \\uD558\\uB294 \\uC635\\uC158\\\"\\uC73C\\uB85C \\uB2E4\\uB8E8\\uBA74 \\uC548 \\uB428\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD3F0\\uD2B8\\uC640 \\uB514\\uC790\\uC778 \\uC758\\uB3C4\\uC5D0 \\uB530\\uB77C \\uACB0\\uACFC \\uB2EC\\uB77C\\uC9D0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC774\\uBBF8 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"letter-spacing\"), \"\\uC73C\\uB85C \\uC790\\uAC04 \\uC870\\uC815\\uD55C UI\\uC5D0 \\uAC19\\uC774 \\uAC78\\uBA74 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\\u3002\"), \" \\uAC19\\uC740 \\uBB38\\uC7A5\\uBD80\\uD638 \\uAC04\\uACA9\\uC774 \\uC608\\uC0C1\\uACFC \\uB2E4\\uB974\\uAC8C \\uBCF4\\uC77C \\uC218 \\uC788\\uC74C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC774 \\uD6A8\\uACFC\\uB294 \\uD3F0\\uD2B8\\uAC00 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"palt\"), \" \\uD14C\\uC774\\uBE14\\uC744 \\uAC00\\uC9C0\\uACE0 \\uC788\\uC744 \\uB54C\\uB9CC \\uB098\\uD0C0\\uB0A8\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC2DC\\uC2A4\\uD15C \\uD3F0\\uD2B8\\uB85C \\uBE44\\uAD50\\uD558\\uBA74 \\uBE0C\\uB77C\\uC6B0\\uC800\\uAC00 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"palt\"), \" \\uC9C0\\uC6D0 \\uC548 \\uD558\\uB294 \\uD3F0\\uD2B8\\uB85C fallback\\uB3FC\\uC11C \\uCC28\\uC774\\uAC00 \\uAC70\\uC758 \\uC548 \\uBCF4\\uC77C \\uC218 \\uC788\\uC74C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC544\\uB798 \\uC608\\uC2DC\\uB294 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"palt\"), \" \\uD655\\uC2E4\\uD788 \\uC9C0\\uC6D0\\uD558\\uB294 Noto Sans JP\\uB97C \\uC6F9\\uD3F0\\uD2B8\\uB85C \\uAC15\\uC81C \\uC9C0\\uC815\\uD574\\uC11C \\uBE44\\uAD50\")))))), mdx(\"link\", {\n href: \"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap\",\n rel: \"stylesheet\"\n }), mdx(\"div\", {\n style: {\n \"display\": \"flex\",\n \"gap\": \"12px\",\n \"flexWrap\": \"wrap\",\n \"margin\": \"16px 0\"\n }\n }, mdx(\"div\", {\n style: {\n \"flex\": \"1\",\n \"minWidth\": \"200px\"\n }\n }, mdx(\"div\", {\n style: {\n \"fontSize\": \"12px\",\n \"color\": \"#667085\",\n \"marginBottom\": \"6px\"\n }\n }, \"palt \\uC5C6\\uC74C (Noto Sans JP)\"), mdx(\"div\", {\n style: {\n \"border\": \"1px dashed #999\",\n \"padding\": \"10px\",\n \"fontSize\": \"20px\",\n \"fontFamily\": \"'Noto Sans JP', sans-serif\"\n },\n lang: \"ja\"\n }, \"\\u30B7\\u30E7\\u30FC\\u30C8\\u52D5\\u753B\\u5E83\\u544A\\u306E\\u4F01\\u753B\\u3001\\u5236\\u4F5C\\u3068\\u3044\\u3046\\u8B1B\\u5EA7\\u3067\\u306F\\u3001\")), mdx(\"div\", {\n style: {\n \"flex\": \"1\",\n \"minWidth\": \"200px\"\n }\n }, mdx(\"div\", {\n style: {\n \"fontSize\": \"12px\",\n \"color\": \"#667085\",\n \"marginBottom\": \"6px\"\n }\n }, \"font-feature-settings: \\\"palt\\\" 1 (Noto Sans JP)\"), mdx(\"div\", {\n style: {\n \"border\": \"1px dashed #2f5bea\",\n \"padding\": \"10px\",\n \"fontSize\": \"20px\",\n \"fontFamily\": \"'Noto Sans JP', sans-serif\",\n \"fontFeatureSettings\": \"'palt' 1\"\n },\n lang: \"ja\"\n }, \"\\u30B7\\u30E7\\u30FC\\u30C8\\u52D5\\u753B\\u5E83\\u544A\\u306E\\u4F01\\u753B\\u3001\\u5236\\u4F5C\\u3068\\u3044\\u3046\\u8B1B\\u5EA7\\u3067\\u306F\\u3001\"))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uAC19\\uC740 \\uD3F0\\uD2B8\\uC778\\uB370\\uB3C4 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \" \\uAC19\\uC740 \\uC804\\uAC01 \\uBB38\\uC7A5\\uBD80\\uD638 \\uC8FC\\uBCC0 \\uC5EC\\uBC31\\uC774 \\uC624\\uB978\\uCABD\\uC5D0\\uC11C \\uB208\\uC5D0 \\uB744\\uAC8C \\uC881\\uC544\\uC9D0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uBC18\\uB300\\uB85C \\uC2DC\\uC2A4\\uD15C \\uD3F0\\uD2B8\\uC5D0 \\uADF8\\uB300\\uB85C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"palt\"), \"\\uB9CC \\uAC78\\uBA74 \\uD3F0\\uD2B8\\uAC00 \\uADF8 \\uD14C\\uC774\\uBE14\\uC744 \\uAC16\\uACE0 \\uC788\\uB294\\uC9C0\\uC5D0 \\uB530\\uB77C \\uACB0\\uACFC \\uB2EC\\uB77C\\uC9D0\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC2E4\\uC81C \\uC11C\\uBE44\\uC2A4 \\uC801\\uC6A9 \\uC804 \\uBC18\\uB4DC\\uC2DC \\uC2E4 \\uC0AC\\uC6A9 \\uD3F0\\uD2B8\\uB85C \\uD655\\uC778\\uD560 \\uAC83\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB514\\uC790\\uC778 \\uD234\\uACFC \\uBE0C\\uB77C\\uC6B0\\uC800 \\uB80C\\uB354\\uB9C1\\uC774 \\uB2E4\\uB974\\uAC8C \\uBCF4\\uC774\\uBA74 \\uBE44\\uAD50 \\uC21C\\uC11C\", mdx(\"ol\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"Figma \\uB4F1\\uC5D0\\uC11C \\uC5B4\\uB5A4 OpenType feature\\uAC00 \\uD65C\\uC131\\uD654\\uB410\\uB294\\uC9C0\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\uBE0C\\uB77C\\uC6B0\\uC800\\uC5D0\\uC11C \\uB3D9\\uC77C \\uD3F0\\uD2B8 \\uD30C\\uC77C\\uC744 \\uC4F0\\uB294\\uC9C0\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"font-feature-settings\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"font-variant-east-asian\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"letter-spacing\"), \" \\uC124\\uC815\\uC774 \\uAC19\\uC740\\uC9C0\")))), mdx(\"h2\", {\n \"id\": \"text-autospace--text-spacing-trim\"\n }, \"text-autospace / text-spacing-trim\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"text-autospace\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"CJK \\uBB38\\uC790\\uC640 Latin/\\uC22B\\uC790 \\uC0AC\\uC774\\uC758 \\uC790\\uB3D9 \\uAC04\\uACA9 \\uC81C\\uC5B4 (2025 Baseline)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\\"\\uC77C\\uBCF8\\uC5B4 + \\uC601\\uBB38 \\uC81C\\uD488\\uBA85 + \\uC22B\\uC790\\\"\\uAC00 \\uC11E\\uC774\\uB294 UI\\uC5D0\\uC11C \\uC720\\uC6A9\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB2E8, \\uC774\\uBBF8 \\uBC88\\uC5ED \\uBB38\\uC790\\uC5F4\\uC5D0 \\uC218\\uB3D9\\uC73C\\uB85C \\uACF5\\uBC31\\uC744 \\uB123\\uC5B4\\uB1A8\\uB2E4\\uBA74 \\uC911\\uBCF5 \\uAC04\\uACA9 \\uC0DD\\uAE38 \\uC218 \\uC788\\uC74C\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"@supports (text-autospace: normal) {\\n :lang(ja) {\\n text-autospace: normal;\\n }\\n}\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"text-spacing-trim\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"CJK \\uBB38\\uC7A5\\uBD80\\uD638\\uAC00 \\uAC00\\uC9C4 \\uB0B4\\uBD80 \\uC5EC\\uBC31\\uC744 \\uC778\\uC811 \\uBB38\\uC790\\uB098 \\uD589 \\uC2DC\\uC791/\\uB05D\\uC5D0\\uC11C \\uB2E4\\uB4EC\\uB294 \\uC18D\\uC131\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\\"\\uAD6C\\uB450\\uC810 \\uC8FC\\uBCC0\\uC774 \\uC720\\uB09C\\uD788 \\uBE44\\uC5B4 \\uBCF4\\uC778\\uB2E4\\\"\\uB294 CS\\uC640 \\uAC1C\\uB150\\uC801\\uC73C\\uB85C \\uAC00\\uC7A5 \\uAC00\\uAE4C\\uC6B4 \\uC18D\\uC131\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"2026\\uB144 \\uAE30\\uC900\\uC73C\\uB85C\\uB3C4 \\uC77C\\uBD80 \\uC8FC\\uC694 \\uBE0C\\uB77C\\uC6B0\\uC800\\uC5D0\\uC11C \\uC9C0\\uC6D0 \\uC81C\\uD55C\\uC801\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"polyfill \\uC788\\uB2E4\\uACE0 \\uAC00\\uC815\\uD558\\uC9C0 \\uB9D0\\uACE0 progressive enhancement\\uB85C\\uB9CC \\uC4F8 \\uAC83\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"@supports (text-spacing-trim: normal) {\\n :lang(ja) {\\n text-spacing-trim: normal;\\n }\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"intlsegmenter\"\n }, \"Intl.Segmenter\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4 \\uBB38\\uC790\\uC5F4\\uC744 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"split(' ')\"), \"\\uACFC \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"length\"), \"\\uB85C \\uB2E4\\uB8E8\\uBA74 \\uC548 \\uB428\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uACF5\\uBC31\\uC73C\\uB85C \\uB2E8\\uC5B4\\uAC00 \\uAD6C\\uBD84\\uB418\\uC9C0 \\uC54A\\uAE30 \\uB54C\\uBB38\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB2E8\\uC5B4 \\uC218\\xB7\\uAC80\\uC0C9 \\uD558\\uC774\\uB77C\\uC774\\uD2B8\\xB7\\uD14D\\uC2A4\\uD2B8 \\uBD84\\uC11D\\uC740 locale-aware segmentation \\uC0AC\\uC6A9\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const segmenter = new Intl.Segmenter('ja-JP', {\\n granularity: 'word',\\n});\\n\\nconst segments = [...segmenter.segment('\\u543E\\u8F29\\u306F\\u732B\\u3067\\u3042\\u308B\\u3002\\u540D\\u524D\\u306F\\u305F\\u306C\\u304D\\u3002')];\\nconst words = segments\\n .filter(({ isWordLike }) => isWordLike)\\n .map(({ segment }) => segment);\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\\"\\uBB38\\uC790 \\uC218\\\"\\uC640 UTF-16 \\uAE38\\uC774\\uB3C4 \\uB2E4\\uB984\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD3C9\\uBC94\\uD55C \\uC77C\\uBCF8\\uC5B4 BMP \\uBB38\\uC790\\uB294 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"text.length\"), \"\\uC640 \\uAC89\\uBCF4\\uAE30 \\uAE00\\uC790 \\uC218\\uAC00 \\uC6B0\\uC5F0\\uD788 \\uB9DE\\uC544\\uB5A8\\uC5B4\\uC9C0\\uB294 \\uACBD\\uC6B0 \\uB9CE\\uC74C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC774\\uBAA8\\uC9C0\\xB7\\uACB0\\uD569 \\uBB38\\uC790\\xB7variation selector \\uC11E\\uC774\\uBA74 \\uC5B4\\uAE0B\\uB0A8\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC0AC\\uC6A9\\uC790\\uAC00 \\uB208\\uC73C\\uB85C \\uBCF4\\uB294 \\uAE00\\uC790 \\uC218 \\uC138\\uC57C \\uD55C\\uB2E4\\uBA74 grapheme \\uAE30\\uC900\\uC73C\\uB85C \\uC140 \\uAC83\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const graphemes = new Intl.Segmenter('ja-JP', {\\n granularity: 'grapheme',\\n});\\n\\nconst count = [...graphemes.segment(text)].length;\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC815\\uADDC\\uD654\\uB3C4 \\uD45C\\uC2DC \\uBB38\\uC790\\uC5F4\\uACFC \\uAC80\\uC0C9 \\uD0A4\\uB97C \\uBD84\\uB9AC\\uD574\\uC57C \\uD568\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"NFKC\"), \"\\uB294 \\uC804\\uAC01 Latin/\\uC22B\\uC790, \\uBC18\\uAC01 \\uAC00\\uD0C0\\uCE74\\uB098 \\uAC19\\uC740 compatibility \\uD615\\uD0DC\\uB97C \\uC811\\uC5B4\\uC11C \\uAC80\\uC0C9 \\uD3B8\\uC758\\uC131 \\uB192\\uC784\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB2E8, \\uC6D0\\uBB38 \\uD45C\\uAE30 \\uC790\\uCCB4\\uB97C \\uBC14\\uAFD4\\uBC84\\uB9BC\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC800\\uC7A5\\xB7\\uD45C\\uC2DC\\uC6A9 \\uC6D0\\uBB38\\uC740 \\uADF8\\uB300\\uB85C \\uB450\\uACE0, \\uAC80\\uC0C9\\uC6A9 \\uD30C\\uC0DD \\uD0A4\\uC5D0\\uB9CC \\uC801\\uC6A9\\uD558\\uB294 \\uD3B8\\uC774 \\uC548\\uC804\")))), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const raw = input; // \\uD45C\\uC2DC/\\uC6D0\\uBCF8 \\uBCF4\\uC874\\nconst searchKey = raw.normalize('NFKC').toLocaleLowerCase('ja-JP');\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"CSS\\uB85C \\uD480 \\uBB38\\uC81C\\uB97C \\uBB38\\uC790\\uC5F4\\uC5D0 \\uACF5\\uBC31 \\uD558\\uB4DC\\uCF54\\uB529\\uD574\\uC11C \\uACE0\\uCE58\\uBA74 \\uC548 \\uB428\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u4F01\\u753B\\u3001\\u5236\\u4F5C\"), \" \\u2192 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u4F01\\u753B\\u3001 \\u5236\\u4F5C\"), \"\\uCC98\\uB7FC \\uBC88\\uC5ED \\uBB38\\uC790\\uC5F4\\uC5D0 \\uC2A4\\uD398\\uC774\\uC2A4 \\uBC15\\uC544\\uB123\\uB294 \\uBC29\\uC2DD\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uD3F0\\uD2B8\\uAC00 \\uBC14\\uB00C\\uAC70\\uB098 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"text-autospace\"), \"\\uAC00 \\uD65C\\uC131\\uD654\\uB418\\uB294 \\uC21C\\uAC04 \\uB2E4\\uC2DC \\uAE68\\uC9D0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uBCF5\\uC0AC\\xB7\\uAC80\\uC0C9 \\uB370\\uC774\\uD130\\uC5D0\\uB3C4 \\uC601\\uD5A5 \\uC90C\")))), mdx(\"h2\", {\n \"id\": \"일본어-공백이-이상하다-cs가-오면-이-순서로-봄\"\n }, \"\\\"\\uC77C\\uBCF8\\uC5B4 \\uACF5\\uBC31\\uC774 \\uC774\\uC0C1\\uD558\\uB2E4\\\" CS\\uAC00 \\uC624\\uBA74 \\uC774 \\uC21C\\uC11C\\uB85C \\uBD04\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\uBB38\\uC790 \\uD655\\uC778\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC2E4\\uC81C\\uB85C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u30FC\"), \"(U+30FC), \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \"(U+3001)\\uC778\\uC9C0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"ASCII \\uC720\\uC0AC\\uBB38\\uC790\\uB85C \\uBCC0\\uD658\\uB418\\uC9C0 \\uC54A\\uC558\\uB294\\uC9C0\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"DOM whitespace \\uD655\\uC778\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uBB38\\uC790\\uC5F4\\uC5D0 \\uC2E4\\uC81C space/NBSP\\uAC00 \\uC0BD\\uC785\\uB410\\uB294\\uC9C0\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Rendered Fonts \\uD655\\uC778\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uBB38\\uC81C\\uB418\\uB294 punctuation\\uB9CC fallback\\uB41C \\uAC83\\uC740 \\uC544\\uB2CC\\uC9C0\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"CSS \\uC81C\\uAC70 \\uC2E4\\uD5D8\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"letter-spacing\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"word-spacing\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"font-feature-settings\"), \"\\uB97C \\uD558\\uB098\\uC529 \\uAEBC\\uBD04\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\uC77C\\uBCF8\\uC5B4 \\uC804\\uC6A9 \\uD3F0\\uD2B8 \\uAC15\\uC81C\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Noto Sans JP \\uB4F1 \\uD655\\uC2E4\\uD55C \\uC77C\\uBCF8\\uC5B4 \\uD3F0\\uD2B8\\uB85C \\uBE44\\uAD50\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\uC904\\uBC14\\uAFC8 \\uADDC\\uCE59 \\uD655\\uC778\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"lang=\\\"ja\\\"\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"line-break\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"word-break\")))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\uBE0C\\uB77C\\uC6B0\\uC800/OS \\uBE44\\uAD50\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"macOS Hiragino, Windows Yu Gothic/Meiryo \\uB4F1 fallback \\uCC28\\uC774 \\uBD84\\uB9AC\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\uB514\\uC790\\uC778 \\uD234 \\uBE44\\uAD50\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uB3D9\\uC77C \\uD3F0\\uD2B8 \\uD30C\\uC77C\\xB7weight\\xB7OpenType feature\\uAC00 \\uB9DE\\uB294\\uC9C0\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u30FC\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\u3001\"), \" \\uC804\\uD6C4\\uC758 \\\"\\uACF5\\uBC31 \\uADE0\\uD615\\\"\\uC740 \\uC2E4\\uC81C \\uC2A4\\uD398\\uC774\\uC2A4\\uBCF4\\uB2E4 glyph metrics + fallback + letter-spacing + OpenType \\uC870\\uD569\\uC77C \\uAC00\\uB2A5\\uC131\\uC744 \\uBA3C\\uC800 \\uC758\\uC2EC\\uD558\\uB294 \\uAC8C \\uB9DE\\uC74C\")), mdx(\"h2\", {\n \"id\": \"참고\"\n }, \"\\uCC38\\uACE0\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.w3.org/TR/jpan-lreq/\"\n }, \"W3C - Japanese Script Resources\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\uC77C\\uBCF8\\uC5B4 \\uC870\\uD310, \\uAD6C\\uB450\\uC810, \\uC904\\uBC14\\uAFC8, \\uC815\\uB82C \\uAD00\\uB828 \\uC790\\uB8CC \\uD5C8\\uBE0C\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.w3.org/International/jlreq/\"\n }, \"W3C - Requirements for Japanese Text Layout (JLREQ)\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"JIS X 4051 \\uAE30\\uBC18 \\uC77C\\uBCF8\\uC5B4 \\uC870\\uD310 \\uC694\\uAD6C\\uC0AC\\uD56D\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang\"\n }, \"MDN - lang global attribute\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-feature-settings\"\n }, \"MDN - font-feature-settings\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break\"\n }, \"MDN - word-break\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"CJK \\uC904\\uBC14\\uAFC8 \\uAC12\\uC758 \\uCC28\\uC774\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace\"\n }, \"MDN - text-autospace\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-spacing-trim\"\n }, \"MDN - text-spacing-trim\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"2026\\uB144 \\uAE30\\uC900 \\uC81C\\uD55C \\uC9C0\\uC6D0\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/Segmenter\"\n }, \"MDN - Intl.Segmenter\"))));\n}\n;\nMDXContent.isMDXComponent = true;","rawBody":"---\ntitle: 일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들\ndate: 2026-09-06\nupdated: 2026-09-06\ntags:\n - i18n\n - css\n - javascript\n---\n\n- 일본인 신규 입사자가 일본어 페이지 보고 피드백 줌\n\t- \"쉼표나 장음부호 앞뒤 공백이 이상하다\"\n\t- `企画、制作` 에서 `、` 오른쪽이 비어 보여서 스페이스 문자 낀 줄 알았음\n\t- DOM 까보니 스페이스 없음\n- 한글 서비스만 만들 땐 마주칠 일 없던 문제라 정리해둠\n\n## 、와 ー는 각각 별도의 유니코드 문자\n\n- `、` = U+3001 IDEOGRAPHIC COMMA\n- `ー` = U+30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK\n\t- 둘 다 ASCII `,`, `-`와 다른 문자\n\t- 폰트 안에서 별도 glyph·metrics 가짐\n- 전각 문장부호는 glyph 자체에 내부 여백(side bearing/advance) 있음\n\t- 눈으로 봤을 때 공백처럼 보여도 실제 스페이스 문자 있는 건 아님\n\n한국어 서비스 습관을 일본어에 그대로 가져가면 어긋나는 지점:\n\n- 단어 사이에 공백이 있다는 전제\n\t- → 일본어는 일반 문장에 띄어쓰기가 거의 없음\n\t- → 줄바꿈 기회가 문자 사이에 존재\n- `word-break: keep-all`을 자주 씀\n\t- → 일본어 본문에 적용하면 정상적인 CJK 줄바꿈을 막아서 overflow 생김\n- 쉼표 `,` 기준으로 생각\n\t- → `、`는 전각 문장부호라 글리프 폭·여백 모델이 다름\n- 하이픈/대시와 비슷한 선으로 인식\n\t- → `ー`는 가타카나·히라가나 장음부호로 완전히 다른 문자\n\n용어 정리 (한국어 이름으로 기억하고, 괄호 안 한자·발음은 검색 키워드로):\n\n- 문장부호·기호류 (`約物`, やくもの, yakumono)\n\t- 일본어 [조판](https://ko.wikipedia.org/wiki/%EC%A1%B0%ED%8C%90)에서 별도 간격 규칙이 붙는 문장부호·기호류\n- 조판 규칙 (`文字組み`, もじぐみ)\n\t- 글자 배치·간격·줄바꿈을 아우르는 [조판](https://ko.wikipedia.org/wiki/%EC%A1%B0%ED%8C%90) 규칙 전반\n- 금칙 처리 (`禁則処理`, きんそくしょり, kinsoku shori)\n\t- 문장부호가 줄 맨 앞/뒤에 부자연스럽게 오는 걸 막는 규칙\n- [전각/반각](https://ko.wikipedia.org/wiki/%EC%A0%84%EA%B0%81%EA%B3%BC_%EB%B0%98%EA%B0%81) (`全角/半角`)\n\t- `Ａ`와 `A`처럼 폭이 다른 문자 형태\n\t- 검색·정규화·UI 폭 계산에 영향\n\n## lang=\"ja\"\n\n- 페이지가 일본어면 문서 루트에 `lang=\"ja\"`\n- 일부 영역만 일본어면 해당 영역에 지정\n- 접근성·음성합성뿐 아니라 `:lang(ja)` 셀렉터로 일본어 전용 스타일 스코프하는 기준이 됨\n\n```html\n\n ...\n\n\n\n

\n 한국어 설명\n ショート動画広告の企画、制作\n

\n```\n\n- [후리가나](https://ko.wikipedia.org/wiki/%ED%9B%84%EB%A6%AC%EA%B0%80%EB%82%98) 필요하면 이미지나 JS로 만들지 말고 `` 태그 사용\n\n```html\n\n 日本語にほんご\n\n```\n\n- locale이 일본어인데 루트 `lang`이 계속 `ko`로 남아있는 경우 실무에서 은근히 있음\n\t- 이것부터 먼저 고칠 것\n\n## font-family에 적었다고 그 폰트가 그렸다는 뜻은 아님\n\n```css\n:lang(ja) {\n font-family:\n \"Hiragino Sans\",\n \"Yu Gothic\",\n \"YuGothic\",\n \"Meiryo\",\n \"Noto Sans JP\",\n sans-serif;\n}\n```\n\n- 가장 중요한 확인 포인트는 glyph fallback\n\t- 지정한 폰트가 일본어 글리프를 포함 안 하거나 웹폰트 subset에서 빠지면, 브라우저가 그 문자만 다른 폰트로 대체함\n\t- `ー`, `、`, 괄호 같은 기호만 다른 metrics 가진 폰트로 떨어지면 그 부분만 이질감 생김\n\t- Chrome DevTools → Elements → Computed → Rendered Fonts 에서 문제되는 노드 직접 확인하는 게 제일 빠름\n- 웹폰트 subset 만들 때 흔한 실수\n\t- 가나·한자만 남기고 문장부호를 빠뜨림\n\t- → punctuation만 system fallback으로 튀어서 폰트 안 맞아 보임\n- 폰트 로딩 타이밍도 줄바꿈에 영향\n\t- 일본어는 문자 단위 줄바꿈이 많아서 fallback font와 최종 font의 advance width 차이가 한 줄의 마지막 문자 위치를 바꿀 수 있음\n\t- `font-display: swap` 쓴다면 CLS뿐 아니라 \"첫 렌더와 로딩 후 줄바꿈이 달라지는가\"도 볼 것\n\n## word-break: keep-all을 일본어에 그대로 쓰면 안 됨\n\n- 일본어는 공백 없이 문장이 이어져서 브라우저가 문자 사이의 줄바꿈 기회를 판단\n- 여기에 금칙처리 규칙까지 겹침\n\t- `、。)]」』` 같은 닫는 문장부호가 줄 맨 앞에 오는 것 피함\n\t- `([「『` 같은 여는 문장부호가 줄 맨 끝에 오는 것 피함\n\n```css\n:lang(ja) {\n line-break: strict;\n word-break: normal;\n overflow-wrap: break-word; /* 긴 URL/식별자 같은 예외 대응 */\n}\n```\n\n- **한국어 CSS 복사하면서 가장 자주 하는 실수 — `word-break: keep-all`을 일본어에도 같이 적용**\n\t- 일본어의 정상적인 CJK 줄바꿈 기회를 지나치게 없애버려서 컨테이너 폭 넘어가는 문제 생김\n\n같은 문장을 폭 260px 박스에 넣고 비교하면 차이가 바로 보임.\n\n
\n
\n
word-break: normal
\n
ショート動画広告の企画、制作という講座では、企画から編集まで一連の流れを学びます。
\n
\n
\n
word-break: keep-all
\n
ショート動画広告の企画、制作という講座では、企画から編集まで一連の流れを学びます。
\n
\n
\n\n- `keep-all` 쪽은 문자 사이의 정상적인 줄바꿈 기회가 막혀서 박스 폭을 넘어가거나 한 단어처럼 취급된 구간이 삐져나옴\n\n## font-feature-settings: \"palt\"\n\n- OpenType feature는 폰트가 제공하는 대체 glyph·metrics를 선택하는 기능\n- 일본어에서 자주 마주치는 태그\n\t- `palt` (비례폭)\n\t- `pwid`\n\t- `vert` (세로쓰기용)\n\n```css\n/* low-level: 폰트가 palt를 제공할 때만 효과가 있음 */\n.jp-heading {\n font-feature-settings: \"palt\" 1;\n}\n\n/* 가능하면 의미가 더 분명한 상위 속성을 우선 검토 */\n.jp-ui {\n font-variant-east-asian: proportional-width;\n}\n```\n\n- `palt`를 \"일본어면 무조건 켜야 하는 옵션\"으로 다루면 안 됨\n\t- 폰트와 디자인 의도에 따라 결과 달라짐\n\t- 이미 `letter-spacing`으로 자간 조정한 UI에 같이 걸면 `、。` 같은 문장부호 간격이 예상과 다르게 보일 수 있음\n\t- 이 효과는 폰트가 `palt` 테이블을 가지고 있을 때만 나타남\n\t\t- 시스템 폰트로 비교하면 브라우저가 `palt` 지원 안 하는 폰트로 fallback돼서 차이가 거의 안 보일 수 있음\n\t\t- 아래 예시는 `palt` 확실히 지원하는 Noto Sans JP를 웹폰트로 강제 지정해서 비교\n\n\n\n
\n
\n
palt 없음 (Noto Sans JP)
\n
ショート動画広告の企画、制作という講座では、
\n
\n
\n
font-feature-settings: \"palt\" 1 (Noto Sans JP)
\n
ショート動画広告の企画、制作という講座では、
\n
\n
\n\n- 같은 폰트인데도 `、` 같은 전각 문장부호 주변 여백이 오른쪽에서 눈에 띄게 좁아짐\n- 반대로 시스템 폰트에 그대로 `palt`만 걸면 폰트가 그 테이블을 갖고 있는지에 따라 결과 달라짐\n\t- 실제 서비스 적용 전 반드시 실 사용 폰트로 확인할 것\n- 디자인 툴과 브라우저 렌더링이 다르게 보이면 비교 순서\n\t1. Figma 등에서 어떤 OpenType feature가 활성화됐는지\n\t2. 브라우저에서 동일 폰트 파일을 쓰는지\n\t3. `font-feature-settings`, `font-variant-east-asian`, `letter-spacing` 설정이 같은지\n\n## text-autospace / text-spacing-trim\n\n- `text-autospace`\n\t- CJK 문자와 Latin/숫자 사이의 자동 간격 제어 (2025 Baseline)\n\t- \"일본어 + 영문 제품명 + 숫자\"가 섞이는 UI에서 유용\n\t- 단, 이미 번역 문자열에 수동으로 공백을 넣어놨다면 중복 간격 생길 수 있음\n\n```css\n@supports (text-autospace: normal) {\n :lang(ja) {\n text-autospace: normal;\n }\n}\n```\n\n- `text-spacing-trim`\n\t- CJK 문장부호가 가진 내부 여백을 인접 문자나 행 시작/끝에서 다듬는 속성\n\t- \"구두점 주변이 유난히 비어 보인다\"는 CS와 개념적으로 가장 가까운 속성\n\t- 2026년 기준으로도 일부 주요 브라우저에서 지원 제한적\n\t- polyfill 있다고 가정하지 말고 progressive enhancement로만 쓸 것\n\n```css\n@supports (text-spacing-trim: normal) {\n :lang(ja) {\n text-spacing-trim: normal;\n }\n}\n```\n\n## Intl.Segmenter\n\n- 일본어 문자열을 `split(' ')`과 `length`로 다루면 안 됨\n\t- 공백으로 단어가 구분되지 않기 때문\n\t- 단어 수·검색 하이라이트·텍스트 분석은 locale-aware segmentation 사용\n\n```js\nconst segmenter = new Intl.Segmenter('ja-JP', {\n granularity: 'word',\n});\n\nconst segments = [...segmenter.segment('吾輩は猫である。名前はたぬき。')];\nconst words = segments\n .filter(({ isWordLike }) => isWordLike)\n .map(({ segment }) => segment);\n```\n\n- \"문자 수\"와 UTF-16 길이도 다름\n\t- 평범한 일본어 BMP 문자는 `text.length`와 겉보기 글자 수가 우연히 맞아떨어지는 경우 많음\n\t- 이모지·결합 문자·variation selector 섞이면 어긋남\n\t- 사용자가 눈으로 보는 글자 수 세야 한다면 grapheme 기준으로 셀 것\n\n```js\nconst graphemes = new Intl.Segmenter('ja-JP', {\n granularity: 'grapheme',\n});\n\nconst count = [...graphemes.segment(text)].length;\n```\n\n- 정규화도 표시 문자열과 검색 키를 분리해야 함\n\t- `NFKC`는 전각 Latin/숫자, 반각 가타카나 같은 compatibility 형태를 접어서 검색 편의성 높임\n\t- 단, 원문 표기 자체를 바꿔버림\n\t- 저장·표시용 원문은 그대로 두고, 검색용 파생 키에만 적용하는 편이 안전\n\n```js\nconst raw = input; // 표시/원본 보존\nconst searchKey = raw.normalize('NFKC').toLocaleLowerCase('ja-JP');\n```\n\n- CSS로 풀 문제를 문자열에 공백 하드코딩해서 고치면 안 됨\n\t- `企画、制作` → `企画、 制作`처럼 번역 문자열에 스페이스 박아넣는 방식\n\t- 폰트가 바뀌거나 `text-autospace`가 활성화되는 순간 다시 깨짐\n\t- 복사·검색 데이터에도 영향 줌\n\n## \"일본어 공백이 이상하다\" CS가 오면 이 순서로 봄\n\n1. 문자 확인\n\t- 실제로 `ー`(U+30FC), `、`(U+3001)인지\n\t- ASCII 유사문자로 변환되지 않았는지\n2. DOM whitespace 확인\n\t- 문자열에 실제 space/NBSP가 삽입됐는지\n3. Rendered Fonts 확인\n\t- 문제되는 punctuation만 fallback된 것은 아닌지\n4. CSS 제거 실험\n\t- `letter-spacing`, `word-spacing`, `font-feature-settings`를 하나씩 꺼봄\n5. 일본어 전용 폰트 강제\n\t- Noto Sans JP 등 확실한 일본어 폰트로 비교\n6. 줄바꿈 규칙 확인\n\t- `lang=\"ja\"`, `line-break`, `word-break`\n7. 브라우저/OS 비교\n\t- macOS Hiragino, Windows Yu Gothic/Meiryo 등 fallback 차이 분리\n8. 디자인 툴 비교\n\t- 동일 폰트 파일·weight·OpenType feature가 맞는지\n\n- `ー`, `、` 전후의 \"공백 균형\"은 실제 스페이스보다 glyph metrics + fallback + letter-spacing + OpenType 조합일 가능성을 먼저 의심하는 게 맞음\n\n## 참고\n\n- [W3C - Japanese Script Resources](https://www.w3.org/TR/jpan-lreq/)\n\t- 일본어 조판, 구두점, 줄바꿈, 정렬 관련 자료 허브\n- [W3C - Requirements for Japanese Text Layout (JLREQ)](https://www.w3.org/International/jlreq/)\n\t- JIS X 4051 기반 일본어 조판 요구사항\n- [MDN - lang global attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang)\n- [MDN - font-feature-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-feature-settings)\n- [MDN - word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break)\n\t- CJK 줄바꿈 값의 차이\n- [MDN - text-autospace](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace)\n- [MDN - text-spacing-trim](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-spacing-trim)\n\t- 2026년 기준 제한 지원\n- [MDN - Intl.Segmenter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/Segmenter)\n","excerpt":"일본인 신규 입사자가 일본어 페이지 보고 피드백 줌 \"쉼표나 장음부호 앞뒤 공백이 이상하다\" 企画、制作 에서 、 오른쪽이 비어 보여서 스페이스 문자 낀 줄 알았음 DOM 까보니 스페이스 없음 한글 서비스만 만들 땐 마주칠 일 없던 문제라 정리해…","outboundReferences":[],"inboundReferences":[]},"tagsOutbound":{"nodes":[{"frontmatter":{"title":"프론트엔드 성능 최적화 팁 기록","tags":["javascript","성능최적화"]},"fields":{"slug":"/posts/frontend/performance-tip/","title":"프론트엔드 성능 최적화 팁 기록","lastUpdated":"8/16/2025","lastUpdatedAt":"2025-08-16T09:01:01.000Z","gitCreatedAt":"2024-01-01T09:36:44.000Z"}},{"frontmatter":{"title":"callback부터 async await까지 - Javascript 비동기","tags":["javascript"]},"fields":{"slug":"/posts/javascript/asynchronous/","title":"callback부터 async await까지 - Javascript 비동기","lastUpdated":"9/16/2023","lastUpdatedAt":"2023-09-16T09:29:27.000Z","gitCreatedAt":"2023-09-16T09:29:27.000Z"}},{"frontmatter":{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","tags":["i18n","css","javascript"]},"fields":{"slug":"/posts/frontend/일본어 폰트-타이포그래피 가이드/","title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","lastUpdated":"9/6/2026","lastUpdatedAt":"2026-09-06T06:00:56.000Z","gitCreatedAt":"2026-09-06T06:00:56.000Z"}},{"frontmatter":{"title":"useTransition과 Suspense의 내부 상호작용","tags":["react","javascript"]},"fields":{"slug":"/posts/frontend/use-transition-suspense/","title":"useTransition과 Suspense의 내부 상호작용","lastUpdated":"3/15/2026","lastUpdatedAt":"2026-03-15T09:04:23.000Z","gitCreatedAt":"2026-03-15T09:04:23.000Z"}},{"frontmatter":{"title":"자바스크립트 데드 코드 제거","tags":["javascript","개선"]},"fields":{"slug":"/posts/javascript/자바스크립트 데드 코드 제거/","title":"자바스크립트 데드 코드 제거","lastUpdated":"7/27/2026","lastUpdatedAt":"2026-07-27T01:49:45.000Z","gitCreatedAt":"2023-10-14T09:10:57.000Z"}},{"frontmatter":{"title":"웹팩을 쓰는 이유와 사용법 정리","tags":["javascript"]},"fields":{"slug":"/posts/javascript/webpack/","title":"웹팩을 쓰는 이유와 사용법 정리","lastUpdated":"3/17/2024","lastUpdatedAt":"2024-03-17T06:05:50.000Z","gitCreatedAt":"2023-09-16T09:29:27.000Z"}},{"frontmatter":{"title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","tags":["SEO","i18n"]},"fields":{"slug":"/posts/seo/hreflang-canonical/","title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","lastUpdated":"6/30/2026","lastUpdatedAt":"2026-06-30T12:28:37.000Z","gitCreatedAt":"2026-06-30T12:28:37.000Z"}},{"frontmatter":{"title":"dynamic-range-limit - HDR 이미지/비디오 밝기 제한 CSS 속성","tags":["css"]},"fields":{"slug":"/posts/web/dynamic-range-limit/","title":"dynamic-range-limit - HDR 이미지/비디오 밝기 제한 CSS 속성","lastUpdated":"5/24/2026","lastUpdatedAt":"2026-05-24T04:36:13.000Z","gitCreatedAt":"2026-05-24T04:36:13.000Z"}},{"frontmatter":{"title":"웹에서\b영상 재생을 하기 위한 주변 지식","tags":["javascript","플레이어"]},"fields":{"slug":"/posts/web/video player/","title":"웹에서\b영상 재생을 하기 위한 주변 지식","lastUpdated":"4/20/2024","lastUpdatedAt":"2024-04-20T07:06:51.000Z","gitCreatedAt":"2024-04-10T02:21:41.000Z"}}]}},"pageContext":{"tags":["i18n","css","javascript"],"slug":"/posts/frontend/일본어 폰트-타이포그래피 가이드/","sidebarItems":[{"title":"","items":[{"title":"Recently Updated","url":"/latest/","collapse":true,"indent":false,"items":[{"title":"09-06: 일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"08-23: 에이전트 프롬프트를 잘 작성한다는게 뭘까?","url":"/posts/ai/agent-prompting/"},{"title":"07-27: 자바스크립트 데드 코드 제거","url":"/posts/javascript/자바스크립트 데드 코드 제거/"},{"title":"07-05: 관찰 가능성 - 카디널리티와 디멘셔널리티","url":"/posts/monitoring/cardinality-and-dimensionality/"},{"title":"06-30: 다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","url":"/posts/seo/hreflang-canonical/"},{"title":"05-24: dynamic-range-limit - HDR 이미지/비디오 밝기 제한 CSS 속성","url":"/posts/web/dynamic-range-limit/"},{"title":"04-18: SEO 클로킹과 콘텐츠 게이팅","url":"/posts/seo/seo-cloaking-and-content-gating/"},{"title":"03-15: useTransition과 Suspense의 내부 상호작용","url":"/posts/frontend/use-transition-suspense/"},{"title":"03-15: 개발 생산성을 위한 내 개발 환경 세팅 기록","url":"/posts/my-setting/"},{"title":"01-29: 내가 써먹으려고 정리한 단축키 & 명령어 모음","url":"/posts/tip/shortcut/"}]}]},{"title":"Tags","items":[{"title":"Readme","type":"tag","url":"/tags/readme/","items":[{"title":"📝 r0k Wiki","url":"/"}]},{"title":"SEO","type":"tag","url":"/tags/seo/","items":[{"title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","url":"/posts/seo/hreflang-canonical/"},{"title":"SEO 클로킹과 콘텐츠 게이팅","url":"/posts/seo/seo-cloaking-and-content-gating/"}]},{"title":"Sentry","type":"tag","url":"/tags/sentry/","items":[{"title":"Sentry","url":"/posts/monitoring/sentry/"}]},{"title":"Web API","type":"tag","url":"/tags/web-api/","items":[{"title":"Blob","url":"/Web_API/Blob/"},{"title":"DOMMatrixReadOnly","url":"/Web_API/DOMMatrixReadOnly/"}]},{"title":"ai","type":"tag","url":"/tags/ai/","items":[{"title":"에이전트 프롬프트를 잘 작성한다는게 뭘까?","url":"/posts/ai/agent-prompting/"}]},{"title":"cloudflare","type":"tag","url":"/tags/cloudflare/","items":[{"title":"github 블로그에 도메인 연결하기 by cloudflare","url":"/posts/cloud/cloudflare/my-dns/"}]},{"title":"css","type":"tag","url":"/tags/css/","items":[{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"dynamic-range-limit - HDR 이미지/비디오 밝기 제한 CSS 속성","url":"/posts/web/dynamic-range-limit/"}]},{"title":"git","type":"tag","url":"/tags/git/","items":[{"title":"git 딥다이브 - git branch, tag, HEAD","url":"/posts/study/codesoom-git/git-deep-dive-01/"},{"title":"git 딥다이브 - git merge, rebase","url":"/posts/study/codesoom-git/git-deep-dive-02/"},{"title":"git 딥다이브 - history","url":"/posts/study/codesoom-git/git-deep-dive-03/"}]},{"title":"i18n","type":"tag","url":"/tags/i-18-n/","items":[{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","url":"/posts/seo/hreflang-canonical/"}]},{"title":"javascript","type":"tag","url":"/tags/javascript/","items":[{"title":"프론트엔드 성능 최적화 팁 기록","url":"/posts/frontend/performance-tip/"},{"title":"callback부터 async await까지 - Javascript 비동기","url":"/posts/javascript/asynchronous/"},{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"useTransition과 Suspense의 내부 상호작용","url":"/posts/frontend/use-transition-suspense/"},{"title":"자바스크립트 데드 코드 제거","url":"/posts/javascript/자바스크립트 데드 코드 제거/"},{"title":"웹팩을 쓰는 이유와 사용법 정리","url":"/posts/javascript/webpack/"},{"title":"웹에서\b영상 재생을 하기 위한 주변 지식","url":"/posts/web/video player/"}]},{"title":"my-setting","type":"tag","url":"/tags/my-setting/","items":[{"title":"개발 생산성을 위한 내 개발 환경 세팅 기록","url":"/posts/my-setting/"}]},{"title":"react","type":"tag","url":"/tags/react/","items":[{"title":"useTransition과 Suspense의 내부 상호작용","url":"/posts/frontend/use-transition-suspense/"}]},{"title":"react-query","type":"tag","url":"/tags/react-query/","items":[{"title":"react-query 동작 안하는 이슈 해결","url":"/posts/library/react-query/fail-request/"}]},{"title":"tip","type":"tag","url":"/tags/tip/","items":[{"title":"git 관련 팁 정리","url":"/posts/tip/git/"},{"title":"내가 써먹으려고 정리한 단축키 & 명령어 모음","url":"/posts/tip/shortcut/"},{"title":"webstorm 사용 팁","url":"/posts/tip/webstorm/"},{"title":"나만의 업무 습관 정리","url":"/posts/tip/나만의 업무 습관 정리/"},{"title":"키보드 안쓰기","url":"/posts/tip/키보드 안쓰기/"}]},{"title":"webstorm","type":"tag","url":"/tags/webstorm/","items":[{"title":"git 관련 팁 정리","url":"/posts/tip/git/"},{"title":"webstorm 사용 팁","url":"/posts/tip/webstorm/"}]},{"title":"개선","type":"tag","url":"/tags/개선/","items":[{"title":"자바스크립트 데드 코드 제거","url":"/posts/javascript/자바스크립트 데드 코드 제거/"},{"title":"eslint에서 biome로","url":"/posts/library/biome/"},{"title":"레거시를 더 나은 환경으로 만들기","url":"/posts/tip/레거시를 더 나은 환경으로 만들기/"}]},{"title":"단축키","type":"tag","url":"/tags/단축키/","items":[{"title":"내가 써먹으려고 정리한 단축키 & 명령어 모음","url":"/posts/tip/shortcut/"}]},{"title":"디깅","type":"tag","url":"/tags/디깅/","items":[{"title":"모노레포에서 서로 다른 React 버전 사용시 에러","url":"/posts/error/모노레포에서 서로 다른 react 버전 사용시 에러/"}]},{"title":"모니터링","type":"tag","url":"/tags/모니터링/","items":[{"title":"프론트엔드 모니터링 - datadog RUM 알아보기","url":"/posts/monitoring/datadog RUM/"},{"title":"관찰 가능성 - 카디널리티와 디멘셔널리티","url":"/posts/monitoring/cardinality-and-dimensionality/"}]},{"title":"성능최적화","type":"tag","url":"/tags/성능최적화/","items":[{"title":"프론트엔드 성능 최적화 팁 기록","url":"/posts/frontend/performance-tip/"}]},{"title":"오브젝트","type":"tag","url":"/tags/오브젝트/","items":[{"title":"오트젝트 01 객체, 설계","url":"/posts/books/object/오브젝트-01/"},{"title":"오트젝트 03 역할, 책임, 협력","url":"/posts/books/object/오브젝트-03/"},{"title":"오트젝트 04 설계 품질과 트레이드 오프","url":"/posts/books/object/오브젝트-04/"},{"title":"오트젝트 06 메시지와 인터페이스","url":"/posts/books/object/오브젝트-06/"},{"title":"오트젝트 05 책임 할당하기","url":"/posts/books/object/오브젝트-05/"},{"title":"오트젝트 02 객체지향 프로그래밍","url":"/posts/books/object/오브젝트-02/"}]},{"title":"정규언어","type":"tag","url":"/tags/정규언어/","items":[{"title":"정규언어","url":"/posts/regex/regular-language/"}]},{"title":"정규표현식","type":"tag","url":"/tags/정규표현식/","items":[{"title":"정규표현식 - 01. 입문 정규표현식","url":"/posts/regex/regex_01/"},{"title":"정규표현식 - 02. 정규표현식의 역사","url":"/posts/regex/regex_02/"},{"title":"정규표현식 - 03. 프로그래머를 위한 고급 정규표현식","url":"/posts/regex/regex_03/"}]},{"title":"프롬프팅","type":"tag","url":"/tags/프롬프팅/","items":[{"title":"에이전트 프롬프트를 잘 작성한다는게 뭘까?","url":"/posts/ai/agent-prompting/"}]},{"title":"플레이어","type":"tag","url":"/tags/플레이어/","items":[{"title":"웹에서\b영상 재생을 하기 위한 주변 지식","url":"/posts/web/video player/"}]}]}],"tagsGroups":[{"title":"Readme","type":"tag","url":"/tags/readme/","items":[{"title":"📝 r0k Wiki","url":"/"}]},{"title":"SEO","type":"tag","url":"/tags/seo/","items":[{"title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","url":"/posts/seo/hreflang-canonical/"},{"title":"SEO 클로킹과 콘텐츠 게이팅","url":"/posts/seo/seo-cloaking-and-content-gating/"}]},{"title":"Sentry","type":"tag","url":"/tags/sentry/","items":[{"title":"Sentry","url":"/posts/monitoring/sentry/"}]},{"title":"Web API","type":"tag","url":"/tags/web-api/","items":[{"title":"Blob","url":"/Web_API/Blob/"},{"title":"DOMMatrixReadOnly","url":"/Web_API/DOMMatrixReadOnly/"}]},{"title":"ai","type":"tag","url":"/tags/ai/","items":[{"title":"에이전트 프롬프트를 잘 작성한다는게 뭘까?","url":"/posts/ai/agent-prompting/"}]},{"title":"cloudflare","type":"tag","url":"/tags/cloudflare/","items":[{"title":"github 블로그에 도메인 연결하기 by cloudflare","url":"/posts/cloud/cloudflare/my-dns/"}]},{"title":"css","type":"tag","url":"/tags/css/","items":[{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"dynamic-range-limit - HDR 이미지/비디오 밝기 제한 CSS 속성","url":"/posts/web/dynamic-range-limit/"}]},{"title":"git","type":"tag","url":"/tags/git/","items":[{"title":"git 딥다이브 - git branch, tag, HEAD","url":"/posts/study/codesoom-git/git-deep-dive-01/"},{"title":"git 딥다이브 - git merge, rebase","url":"/posts/study/codesoom-git/git-deep-dive-02/"},{"title":"git 딥다이브 - history","url":"/posts/study/codesoom-git/git-deep-dive-03/"}]},{"title":"i18n","type":"tag","url":"/tags/i-18-n/","items":[{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","url":"/posts/seo/hreflang-canonical/"}]},{"title":"javascript","type":"tag","url":"/tags/javascript/","items":[{"title":"프론트엔드 성능 최적화 팁 기록","url":"/posts/frontend/performance-tip/"},{"title":"callback부터 async await까지 - Javascript 비동기","url":"/posts/javascript/asynchronous/"},{"title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","url":"/posts/frontend/일본어 폰트-타이포그래피 가이드/"},{"title":"useTransition과 Suspense의 내부 상호작용","url":"/posts/frontend/use-transition-suspense/"},{"title":"자바스크립트 데드 코드 제거","url":"/posts/javascript/자바스크립트 데드 코드 제거/"},{"title":"웹팩을 쓰는 이유와 사용법 정리","url":"/posts/javascript/webpack/"},{"title":"웹에서\b영상 재생을 하기 위한 주변 지식","url":"/posts/web/video player/"}]},{"title":"my-setting","type":"tag","url":"/tags/my-setting/","items":[{"title":"개발 생산성을 위한 내 개발 환경 세팅 기록","url":"/posts/my-setting/"}]},{"title":"react","type":"tag","url":"/tags/react/","items":[{"title":"useTransition과 Suspense의 내부 상호작용","url":"/posts/frontend/use-transition-suspense/"}]},{"title":"react-query","type":"tag","url":"/tags/react-query/","items":[{"title":"react-query 동작 안하는 이슈 해결","url":"/posts/library/react-query/fail-request/"}]},{"title":"tip","type":"tag","url":"/tags/tip/","items":[{"title":"git 관련 팁 정리","url":"/posts/tip/git/"},{"title":"내가 써먹으려고 정리한 단축키 & 명령어 모음","url":"/posts/tip/shortcut/"},{"title":"webstorm 사용 팁","url":"/posts/tip/webstorm/"},{"title":"나만의 업무 습관 정리","url":"/posts/tip/나만의 업무 습관 정리/"},{"title":"키보드 안쓰기","url":"/posts/tip/키보드 안쓰기/"}]},{"title":"webstorm","type":"tag","url":"/tags/webstorm/","items":[{"title":"git 관련 팁 정리","url":"/posts/tip/git/"},{"title":"webstorm 사용 팁","url":"/posts/tip/webstorm/"}]},{"title":"개선","type":"tag","url":"/tags/개선/","items":[{"title":"자바스크립트 데드 코드 제거","url":"/posts/javascript/자바스크립트 데드 코드 제거/"},{"title":"eslint에서 biome로","url":"/posts/library/biome/"},{"title":"레거시를 더 나은 환경으로 만들기","url":"/posts/tip/레거시를 더 나은 환경으로 만들기/"}]},{"title":"단축키","type":"tag","url":"/tags/단축키/","items":[{"title":"내가 써먹으려고 정리한 단축키 & 명령어 모음","url":"/posts/tip/shortcut/"}]},{"title":"디깅","type":"tag","url":"/tags/디깅/","items":[{"title":"모노레포에서 서로 다른 React 버전 사용시 에러","url":"/posts/error/모노레포에서 서로 다른 react 버전 사용시 에러/"}]},{"title":"모니터링","type":"tag","url":"/tags/모니터링/","items":[{"title":"프론트엔드 모니터링 - datadog RUM 알아보기","url":"/posts/monitoring/datadog RUM/"},{"title":"관찰 가능성 - 카디널리티와 디멘셔널리티","url":"/posts/monitoring/cardinality-and-dimensionality/"}]},{"title":"성능최적화","type":"tag","url":"/tags/성능최적화/","items":[{"title":"프론트엔드 성능 최적화 팁 기록","url":"/posts/frontend/performance-tip/"}]},{"title":"오브젝트","type":"tag","url":"/tags/오브젝트/","items":[{"title":"오트젝트 01 객체, 설계","url":"/posts/books/object/오브젝트-01/"},{"title":"오트젝트 03 역할, 책임, 협력","url":"/posts/books/object/오브젝트-03/"},{"title":"오트젝트 04 설계 품질과 트레이드 오프","url":"/posts/books/object/오브젝트-04/"},{"title":"오트젝트 06 메시지와 인터페이스","url":"/posts/books/object/오브젝트-06/"},{"title":"오트젝트 05 책임 할당하기","url":"/posts/books/object/오브젝트-05/"},{"title":"오트젝트 02 객체지향 프로그래밍","url":"/posts/books/object/오브젝트-02/"}]},{"title":"정규언어","type":"tag","url":"/tags/정규언어/","items":[{"title":"정규언어","url":"/posts/regex/regular-language/"}]},{"title":"정규표현식","type":"tag","url":"/tags/정규표현식/","items":[{"title":"정규표현식 - 01. 입문 정규표현식","url":"/posts/regex/regex_01/"},{"title":"정규표현식 - 02. 정규표현식의 역사","url":"/posts/regex/regex_02/"},{"title":"정규표현식 - 03. 프로그래머를 위한 고급 정규표현식","url":"/posts/regex/regex_03/"}]},{"title":"프롬프팅","type":"tag","url":"/tags/프롬프팅/","items":[{"title":"에이전트 프롬프트를 잘 작성한다는게 뭘까?","url":"/posts/ai/agent-prompting/"}]},{"title":"플레이어","type":"tag","url":"/tags/플레이어/","items":[{"title":"웹에서\b영상 재생을 하기 위한 주변 지식","url":"/posts/web/video player/"}]}],"latestPosts":[{"fields":{"slug":"/posts/frontend/일본어 폰트-타이포그래피 가이드/","title":"일본어 폰트·타이포그래피 - 한국인 웹 개발자가 자주 놓치는 것들","lastUpdatedAt":"2026-09-06T06:00:56.000Z","lastUpdated":"9/6/2026"},"frontmatter":{"draft":false,"tags":["i18n","css","javascript"]}},{"fields":{"slug":"/posts/ai/agent-prompting/","title":"에이전트 프롬프트를 잘 작성한다는게 뭘까?","lastUpdatedAt":"2026-08-23T05:57:19.000Z","lastUpdated":"8/23/2026"},"frontmatter":{"draft":false,"tags":["ai","프롬프팅"]}},{"fields":{"slug":"/posts/javascript/자바스크립트 데드 코드 제거/","title":"자바스크립트 데드 코드 제거","lastUpdatedAt":"2026-07-27T01:49:45.000Z","lastUpdated":"7/27/2026"},"frontmatter":{"draft":false,"tags":["javascript","개선"]}},{"fields":{"slug":"/posts/monitoring/cardinality-and-dimensionality/","title":"관찰 가능성 - 카디널리티와 디멘셔널리티","lastUpdatedAt":"2026-07-05T07:49:54.000Z","lastUpdated":"7/5/2026"},"frontmatter":{"draft":false,"tags":["모니터링"]}},{"fields":{"slug":"/posts/seo/hreflang-canonical/","title":"다국어 페이지 작업시 주의해야할 것 - hreflang / canonical","lastUpdatedAt":"2026-06-30T12:28:37.000Z","lastUpdated":"6/30/2026"},"frontmatter":{"draft":false,"tags":["SEO","i18n"]}},{"fields":{"slug":"/posts/web/dynamic-range-limit/","title":"dynamic-range-limit - HDR 이미지/비디오 밝기 제한 CSS 속성","lastUpdatedAt":"2026-05-24T04:36:13.000Z","lastUpdated":"5/24/2026"},"frontmatter":{"draft":false,"tags":["css"]}},{"fields":{"slug":"/posts/seo/seo-cloaking-and-content-gating/","title":"SEO 클로킹과 콘텐츠 게이팅","lastUpdatedAt":"2026-04-18T07:10:38.000Z","lastUpdated":"4/18/2026"},"frontmatter":{"draft":false,"tags":["SEO"]}},{"fields":{"slug":"/posts/frontend/use-transition-suspense/","title":"useTransition과 Suspense의 내부 상호작용","lastUpdatedAt":"2026-03-15T09:04:23.000Z","lastUpdated":"3/15/2026"},"frontmatter":{"draft":false,"tags":["react","javascript"]}},{"fields":{"slug":"/posts/my-setting/","title":"개발 생산성을 위한 내 개발 환경 세팅 기록","lastUpdatedAt":"2026-03-15T04:34:39.000Z","lastUpdated":"3/15/2026"},"frontmatter":{"draft":false,"tags":["my-setting"]}},{"fields":{"slug":"/posts/tip/shortcut/","title":"내가 써먹으려고 정리한 단축키 & 명령어 모음","lastUpdatedAt":"2026-01-29T12:10:22.000Z","lastUpdated":"1/29/2026"},"frontmatter":{"draft":false,"tags":["단축키","tip"]}}]}}, "staticQueryHashes": ["2320115945","2650345336","3495835395","451533639"]}